<!--
 * @description  : 市管-添加特殊区域
 * @descriptionDetail: 市管-添加特殊区域
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-26 15:57:44
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <u-icon name="search" color="#FFF" size="38" style="margin: 0 24rpx 0 6rpx" @tap="selectCondit"></u-icon>
      <u-icon name="plus" color="#FFF" size="38" style="margin: 0 24rpx 0 6rpx" @tap="handlerAdd"></u-icon>
    </theme-navbar>
    <!-- #endif -->

    <!-- #ifdef H5-DINGDING || H5-WECHAT || H5-EMP -->
    <fab-button :content="fContent" @fabtrigger="fabtrigger" />
    <!-- #endif -->

    <view class="content">
      <me-table :i="0" :top="0" :index="0" :load-data="loadData" ref="mescrollItem0">
        <template #default="d">
          <u-swipe-action class="swipe-list" :index="d.index" :options="cardOptions" :key="d.index" @click="deliverClick" :show="contentList[d.index].showSwipe" @open="deliverOpen">
            <view class="task-list">
              <u-row @tap="handlerSelectItem(d.data)">
                <u-col span="10">
                  <areas-item :isClick="false" :client="d.data"></areas-item>
                </u-col>
                <u-col span="2" text-align="left">
                  <u-icon name="checkbox-mark" :color="$theme.u_type_primary" size="38" style="margin-right: 10px;" v-if="selectedUids.includes(d.data.areaUuid)"></u-icon>
                </u-col>
              </u-row>
            </view>
          </u-swipe-action>
        </template>
      </me-table>
      <!-- 底部按钮开始 -->
      <view class="submit-btns btn-other-cls" style="left: 0px">
        <u-button class="u-btn" type="primary" @click="handlerSure">
          确定
        </u-button>
      </view>
    </view>

    <u-popup v-model="queryShow" width="80%" mode="right">
      <special-areas-search ref="sasRef" @choiceOrg="orgChoice" @selectChange="selectChange"></special-areas-search>
    </u-popup>
    <!-- 组织机构选择 -->
    <u-popup mode="bottom" height="80%" v-model="orgSelectShow">
      <org-select :cleanParentOrg="true" :isHybrid="true" limitNodeType="all" treeType="zm-all" @choose="handlerChooseOrg"></org-select>
    </u-popup>
    <u-popup :mask-close-able="false" v-model="typeShow" border-radius="20" mode="center" width="80%" height="410rpx">
      <view class="good-popup-lay">
        <view class="good-popup-lay__title">
          类型选择
        </view>
        <view style="margin: 32rpx 0;">
          <u-form-item label-width="150" label="是否12313:" label-position="left">
            <u-switch v-model="isReportHotline"></u-switch>
          </u-form-item>
          <u-form-item label-width="150" v-show="isReportHotline" label="受理单号:" label-position="left">
            <u-input v-model="applyCode" placeholder="请输入" :needValid="true"></u-input>
          </u-form-item>
        </view>
        <view class="good-popup-lay__btns">
          <u-button plain type="primary" size="medium" @click="closeSpecialType">
            取&nbsp;&nbsp;&nbsp;&nbsp;消
          </u-button>
          <u-button type="primary" size="medium" @click="saveSpecialType">
            保&nbsp;&nbsp;&nbsp;&nbsp;存
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MeTable from "@/components/me-table.vue";
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import checkService from "@/service/check/check.service";
import AreasItem from "./components/areas-item.vue";
import SpecialAreasSearch from "./components/specialAreasSearch.vue";
import OrgSelect from "@/components/org-select.vue";
import fabButton from "@/components/uni-fab.vue";
export default {
  components: {
    MeTable,
    AreasItem,
    SpecialAreasSearch,
    OrgSelect,
    fabButton,
  },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      isSingle: false, // 是否单选，默认多选
      isSupple: false, // 判断是否为货物来源
      selectedUids: [], // 选中项的ids
      selectedItems: [], // 选中项
      planList: [],
      newList: [],
      searchObj: {}, // 返回过来查询对象
      queryShow: false,
      orgSelectShow: false,
      isReportHotline: false,
      typeShow: false,
      applyCode: "",
      fContent: [
        {
          iconPath: require("@/static/add.png"),
          selectedIconPath: require("@/static/add.png"),
          text: "添加",
          active: false,
        },
        {
          iconPath: require("@/static/sou.png"),
          selectedIconPath: require("@/static/sou.png"),
          text: "筛选",
          active: false,
        },
      ],
      cardOptions: [
        {
          text: "查看",
          style: {
            backgroundColor: "#007aff",
          },
        },
      ],
      contentList: [],
    };
  },
  onLoad(option) {
    this.isSingle = option.isSingle;
    if (option.isSupple) {
      this.isSupple = true;
    }
    let opt = this.getRouteParam();
    this.planList = this.$u.test.array(opt) ? opt : [];
  },
  methods: {
    setRightBtns() {
      // 设置右侧标题
      // #ifdef H5-DINGDING
      this.$deviceApi.setMenu(
        [
          {
            id: "1",
            text: "添加",
          },
          {
            id: "2",
            text: "筛选",
          },
        ],
        (res) => {
          if (res.id == "1") {
            // 添加
            this.handlerAdd();
          } else {
            // 筛选
            this.selectCondit();
          }
        }
      );
      // #endif
    },
    deliverOpen(index) {
      this.contentList[index] ? (this.contentList[index].showSwipe = true) : "";
      this.contentList.map((val, idx) => {
        if (index != idx) this.contentList[idx].showSwipe = false;
      });
    },
    deliverClick(index, btnIndex) {
      let list = this.$refs.mescrollItem0.listDatas;
      let obj = list[index];
      if (!obj.longitude || !obj.latitude) {
        this.$modal.alert("该档案经纬度异常，禁止查看");
      }
      this.$u.route({
        url: "/pages/check/specialAreasMap",
        type: "to",
        params: {
          areaName: obj.areaName,
          longitude: obj.longitude,
          latitude: obj.latitude,
        },
      });
      this.deliverOpen(999);
    },
    fabtrigger(act) {
      console.log("act", act);
      if (act.index === 0) {
        this.handlerAdd();
      } else if (act.index === 1) {
        this.selectCondit();
      }
    },
    // 右侧查询条件
    selectCondit() {
      this.queryShow = true;
      this.setRouteParam(this.searchObj);
    },
    // 查询条件回调
    selectChange(e) {
      this.queryShow = false;
      this.searchObj = e;
      this.handlerSearch();
    },
    handlerSearch() {
      this.$refs["mescrollItem0"].refresh();
    },
    // 添加
    handlerAdd() {
      this.$u.route("/pages/check/addSpecialAreas");
      this.deliverOpen(999);
    },
    updateBackState(param) {
      if (param.refresh) {
        this.handlerSearch();
      }
    },
    orgChoice() {
      this.orgSelectShow = true;
    },
    closeSpecialType() {
      this.typeShow = false;
      this.isReportHotline = false;
      this.applyCode = "";
    },
    saveSpecialType() {
      if (this.isReportHotline && this.$u.test.isEmpty(this.applyCode)) return this.$u.toast("请输入受理单号");
      if (!this.isReportHotline) {
        this.applyCode = "";
      }
      this.selectedItems.filter((item) => {
        let obj = item;
        this.$set(obj, "isReportHotline", this.isReportHotline);
        this.$set(obj, "applyCode", this.applyCode);
        obj.isReportHotline = obj.isReportHotline ? 1 : 0;
        return obj;
      });
      this.backPrev({
        paramKey: "specialAreasTask",
        param: this.selectedItems,
      });
      this.selectedUids = this.selectedItems = [];
      this.typeShow = false;
    },
    // 组织单位回调事件
    handlerChooseOrg(orgs) {
      this.$refs.sasRef.queryForm.orgUuid = orgs[0].id;
      this.$refs.sasRef.queryForm.orgName = orgs[0].name;
      this.$refs.sasRef.orgName = orgs[0].name;
      this.orgSelectShow = false;
    },
    // 选中
    handlerSelectItem(item) {
      if (this.isSingle) {
        this.selectedUids = [item.areaUuid];
        this.selectedItems = [item];
        return;
      }
      if (this.selectedUids.includes(item.areaUuid)) {
        this.selectedItems = this.selectedItems.filter((it) => it.areaUuid != item.areaUuid);
      } else {
        this.selectedItems.push(item);
      }
      this.selectedUids = [];
      this.selectedItems.forEach((it) => this.selectedUids.push(it.areaUuid));
    },
    // 特殊区域列表查询数据
    loadData(page) {
      // 调用后台接口查询数据：分页参数page.size, page.num
      return new Promise((resolve) => {
        checkService
          .findAreaListPage({
            page: page.num,
            limit: page.size,
            isActive: 1,
            ...this.searchObj,
          })
          .then((res) => {
            if (res.success && res.code == 0) {
              let list = res.data.map((item) => {
                return {
                  ...item,
                  showSwipe: false,
                };
              });
              this.contentList = list;
              resolve({
                data: this.contentList,
                count: res.count,
              });
            } else {
              resolve({
                data: [],
                count: 0,
              });
            }
          })
          .catch((err) => {
            resolve({
              data: [],
              count: 0,
            });
          });
      });
    },
    // 确定
    handlerSure() {
      let self = this;
      // 零售户添加
      if (this.selectedItems.length == 0) {
        this.$u.toast("请选择特殊区域");
        return;
      }
      this.planList.forEach((item) => {
        self.newList.push(item.areaUuid);
      });
      let idList = self.selectedItems.filter((r) => {
        return self.newList.includes(r.areaUuid);
      });
      if (idList.length > 0) {
        this.$u.hideLoading();
        this.selectedItems.filter((item) => {
          if (item.areaUuid == idList[0].areaUuid) {
            this.$u.toast(`【${item.areaName}】已存在`);
          }
        });
        return;
      }
      this.typeShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 0;
}
.content {
  padding: 0rpx 20rpx;
  background: #f5f5f5;
  padding-bottom: 150rpx;
  overflow: hidden;
  .swipe-list {
    background: #ffffff;
    margin-top: 20rpx;
    overflow: hidden;
    border-radius: 5px;
  }
  .task-list {
    padding: 5px 0 !important;
  }
}

.sticky-header {
  background-color: #fff;
  position: fixed;
  /* #ifdef H5-DINGDING  */
  top: 0px;
  /* #endif */
  /* #ifndef H5-DINGDING  */
  top: 44px;
  /* #endif */
  width: 100%;
  height: 40px;
  z-index: 999;
}

.good-popup-lay {
  padding: $cm-content-paddng-row;
  width: 100%;
  height: 100%;

  &__title {
    font-size: 36rpx;
    font-weight: 600;
    color: $u-main-color;
    margin: 10rpx 0;
    text-align: center;
    width: 100%;
  }

  &__btns {
    width: 100%;
    margin-top: 24rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    uni-button {
      flex: 0.28;
    }
  }
}
</style>
